<template>
	<view class="layout">
		<scroll-view class="data" scroll-x="true" :style="{width:width+'rpx'}">
			<!-- DHT -->
			<view class="row" v-if="sensorDHTs.length">
				<view class="left1">时间</view>
				<view class="left2">气温</view>
				<view class="left2">湿度</view>
				<view class="left2">体感</view>
				<view class="left2">露点</view>
			</view>
			<view class="row" v-for="sensorDHT in sensorDHTs" :key="sensorDHT.id">
				<view class="left1">{{sensorDHT.datetime}}</view>
				<view class="left2">{{sensorDHT.temperature}}°C</view>
				<view class="left2">{{sensorDHT.humidity}}%</view>
				<view class="left2">{{sensorDHT.heat}}°C</view>
				<view class="left2">{{sensorDHT.dewPoint}}°C</view>
			</view>
			<!-- AEM1000 -->
			<view class="row" v-if="sensorAEM1000s.length">
				<view class="left1">时间</view>
				<view class="left2">气温</view>
				<view class="left2">湿度</view>
				<view class="left2">露点</view>
				<view class="left2">VOCs</view>
				<view class="left2">CO2</view>
				<view class="left2">PM2.5</view>
			</view>
			<view class="row" v-for="sensorAEM1000 in sensorAEM1000s" :key="sensorAEM1000.id">
				<view class="left1">{{sensorAEM1000.datetime}}</view>
				<view class="left2">{{sensorAEM1000.temperature}}°C</view>
				<view class="left2">{{sensorAEM1000.humidity}}%</view>
				<view class="left2">{{sensorAEM1000.dewPoint}}°C</view>
				<view class="left2">{{sensorAEM1000.co2}}ppm</view>
				<view class="left2">{{sensorAEM1000.voc}}ppm</view>
				<view class="left2">{{sensorAEM1000.pm2p5}}ppm</view>
			</view>
			<!-- MPPT -->
			<view class="row" v-if="deviceMPPTs.length">
				<view class="left1">时间</view>
				<view class="left2">电池电压</view>
				<view class="left2">光伏电压</view>
				<view class="left2">充电电流</view>
				<view class="left2">放电电压</view>
				<view class="left2">放电电流</view>
				<view class="left2">发电量</view>
				<view class="left2">用电量</view>
				<view class="left2">温度</view>
				<view class="left2">故障</view>
			</view>
			<view class="row" v-for="deviceMPPT in deviceMPPTs" :key="deviceMPPT.id">
				<view class="left1">{{deviceMPPT.datetime}}</view>
				<view class="left2">{{deviceMPPT.batteryVoltage}}V</view>
				<view class="left2">{{deviceMPPT.solarVoltage}}V</view>
				<view class="left2">{{deviceMPPT.chargeCurrent}}A</view>
				<view class="left2">{{deviceMPPT.dischargeVoltage}}V</view>
				<view class="left2">{{deviceMPPT.dischargeCurrent}}A</view>
				<view class="left2">{{deviceMPPT.totalGeneration}}kWh</view>
				<view class="left2">{{deviceMPPT.totalConsumption}}kWh</view>
				<view class="left2">{{deviceMPPT.temperature}}°C</view>
				<view class="left2">{{deviceMPPT.status}}</view>
			</view>
			<!-- UPS -->
			<view class="row" v-if="deviceUPSs.length">
				<view class="left1">时间</view>
				<view class="left2">充电状态</view>
				<view class="left2">充电电压</view>
				<view class="left2">充电电流</view>
				<view class="left2">充电功率</view>
				<view class="left2">UPS电池组电压</view>
				<view class="left2">UPS电池组电流</view>
				<view class="left2">UPS电量百分比</view>
				<view class="left2">剩余使用时间</view>
				<view class="left2">剩余充电时间</view>
				<view class="left2">电池1容量</view>
				<view class="left2">电池2容量</view>
				<view class="left2">电池3容量</view>
				<view class="left2">电池4容量</view>
			</view>
			<view class="row" v-for="deviceUPS in deviceUPSs" :key="deviceUPS.id">
				<view class="left1">{{deviceUPS.datetime}}</view>
				<view class="left2">{{deviceUPS.status}}</view>
				<view class="left2">{{deviceUPS.vbusVoltage}}mV</view>
				<view class="left2">{{deviceUPS.vbusCurrent}}mA</view>
				<view class="left2">{{deviceUPS.vbusPower}}mW</view>
				<view class="left2">{{deviceUPS.batteryVoltage}}mV</view>
				<view class="left2">{{deviceUPS.batteryCurrent}}mA</view>
				<view class="left2">{{deviceUPS.batteryPercent}}%</view>
				<view class="left2">{{deviceUPS.toEmpty}}分钟</view>
				<view class="left2">{{deviceUPS.toFull}}分钟</view>
				<view class="left2">{{deviceUPS.cellVoltage1}}mV</view>
				<view class="left2">{{deviceUPS.cellVoltage2}}mV</view>
				<view class="left2">{{deviceUPS.cellVoltage3}}mV</view>
				<view class="left2">{{deviceUPS.cellVoltage4}}mV</view>
			</view>
			<!-- EM -->
			<view class="row" v-if="deviceEMs.length">
				<view class="left1">时间</view>
				<view class="left2">电量</view>
				<view class="left2">功率</view>
				<view class="left2">电压</view>
				<view class="left2">电流</view>
				<view class="left2">功率因数</view>
			</view>
			<view class="row" v-for="deviceEM in deviceEMs" :key="deviceEM.id">
				<view class="left1">{{deviceEM.datetime}}</view>
				<view class="left2">{{deviceEM.electricityConsumption}}kWh</view>
				<view class="left2">{{deviceEM.activePower}}W</view>
				<view class="left2">{{deviceEM.voltage}}V</view>
				<view class="left2">{{deviceEM.current}}A</view>
				<view class="left2">{{deviceEM.powerFactor}}</view>
			</view>
		</scroll-view>
	</view>
	<view class="load" v-if="noData">
		<uni-load-more status="onMore"></uni-load-more>
	</view>
	<view class="safe_area"></view>
	<view class="float">
		<uni-icons type="arrow-up" class="item" @click="onTop" size="36"></uni-icons>
	</view>
</template>

<script setup lang="ts">
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getPages } from '@/services/sensor'
	import { AEM1000, DHT } from '@/types/sensor'
	import { type Page } from '@/types/common'
	import { MPPT, UPS, EM } from '@/types/device'

	/**
	 * 定义分页请求数据并给默认值
	 */
	const queryPages = {
		current: 1,
		size: 40,
		type: '',
		mac: ''
	}
	const noData = ref(false)                                       // 过滤请求用中间变量
	let width = 730
	/**
	 * 定义返回值
	 */
	const sensorDHTs = ref<DHT[]>([])
	const sensorAEM1000s = ref<AEM1000[]>([])
	const deviceMPPTs = ref<MPPT[]>([])
	const deviceUPSs = ref<UPS[]>([])
	const deviceEMs = ref<EM[]>([])

	/**
	 * 分页查询
	 * 如果请求的size比返回的size大,屏蔽请求
	 */
	async function getPagesData(type : string, mac : string, current : number, size : number) {
		await getPages<Page<DHT>>(type, mac, current, size).then(res => {
			if (type == 'DHT') {
				sensorDHTs.value = [...sensorDHTs.value, ...res.data.records]
				width = 250 + 120 * 4                                    // 定义宽度,基础宽度250+每列x列数
			} else if (type == 'AEM1000') {
				sensorAEM1000s.value = [...sensorAEM1000s.value, ...res.data.records]
				width = 250 + 120 * 6
			} else if (type == 'MPPT') {
				deviceMPPTs.value = [...deviceMPPTs.value, ...res.data.records]
				width = 250 + 120 * 9
			} else if (type == 'UPS') {
				deviceUPSs.value = [...deviceUPSs.value, ...res.data.records]
				width = 250 + 120 * 13
			} else if (type == 'EM') {
				deviceEMs.value = [...deviceEMs.value, ...res.data.records]
				width = 250 + 120 * 5
			}
			if (queryPages.size > res.data.size) noData.value = true    // 过滤请求判断
		})
	}

	/**
	 * 返回顶部
	 */
	function onTop() {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 200
		})
	}

	/**
	 * 在onLoad生命周期中接收页面接口传参并解构
	 * 使用数据必须在onLoad,生命周期比setup晚
	 */
	onLoad((e) => {
		let { type, mac, name } = e
		queryPages.type = type
		queryPages.mac = mac
		uni.setNavigationBarTitle({
			title: name
		})
		getPagesData(type, mac, queryPages.current, queryPages.size)
	})

	onReachBottom(() => {
		if (noData.value) return                                     // 过滤触底请求
		queryPages.current++
		getPagesData(queryPages.type, queryPages.mac, queryPages.current, queryPages.size)
	})
</script>

<style lang="scss" scoped>
	.layout {
		background-color: #f0f0f0;

		.data {
			background-color: #efffef;
			border: 1px solid#ddd;
			border-radius: 15rpx;
			box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);
			margin: 10rpx;

			.row {
				display: flex;
				justify-content: space-around; // 左右两端对齐
				align-items: center;
				height: 60rpx;
				padding: 0 auto;
				font-size: 26rpx;
				border-bottom: 1px solid#ddd;
				text-align: center;

				.left1 {
					width: 250rpx;
					font-size: 24rpx;

				}

				.left2 {
					width: 120rpx;
				}
			}
		}
	}

	.load {
		padding: 30rpx 0;
	}

	.safe_area {
		height: env(safe-area-inset-bottom);
	}

	.float {
		position: fixed; // 悬浮层
		right: 50rpx;
		bottom: calc(100rpx + env(safe-area-inset-bottom));

		.item {
			width: 100rpx;
			height: 100rpx;
			background: rgba(255, 255, 255, 0.9);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #eee;
		}
	}
</style>